<template>
	<sg-goods-card :goodsInfo="infor">
		<template :goodsInfo="infor">
			<view class="titleBar">
				<view class="price">
					<text class="text">￥ {{infor.price}}</text>
					<u-icon
						:name="uiconName"
						:label="uiconLable"
						size="40rpx"
						@click="colletGoods()"
						color="#5284f8"
						labelColor="rgba(125, 125, 125, 1)"
					/>
				</view>

				<view class="user-info">
					<view
						style="display:flex;"
						class="user-ava"
					>
						<u-avatar
							:src="infor.publisherAvatar || fakeSkin"
							size="50rpx"
						/>
						<view
							class="text"
						>
							{{infor.publisherName || fakeName}}
						</view>
					</view>
					<text class="time">{{infor.releaseTime.split(" ")[0]}}</text>
				</view>
			</view>
		</template>
	</sg-goods-card>
</template>

<script>
import SgGoodsCard from '@/components/sg-goods-card/sgGoodsCard.vue'
// import SgGoodsCard from '../../../components/sg-goods-card/sgGoodsCard.vue'

export default {
  name: 'product-infor',
  components: {
    SgGoodsCard
  },
  props: {
    infor: {
      type: Object
    }
  },
  async onLoad() {
  },
  computed: {
    uiconName() {
      const { infor } = this

      return infor.isCollect ? 'star-fill' : 'star'
    },
    uiconLable() {
      const { infor } = this

      return infor.collection > 99 ? '99+' : infor.collection
    }
  },
  data() {
    return {
      fakeSkin: 'https://img.ixintu.com/download/jpg/20200716/bde64019d277e8e4f32a80f72894764d_512_512.jpg!con',
      fakeName: '一只盒紫',
    }
  },

  methods: {
    // 收藏改商品
    colletGoods() {
      this.$emit('coletion')
    },
    // 跳转
    linkto(item) {
		  uni.navigateTo({
		    url: item
		  })
    }
  }
}
</script>

<style lang="scss" scoped>
	.titleBar {
		.price {

			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.text {
				font-size: 32rpx;
				color: #EC493B;
			}
		}

		.user-info {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding-top: 10rpx;
			vertical-align:baseline;
			.user-ava{
				display: flex;
				align-items: center;
				.text {
				margin-left: 16rpx;
				margin-right: 16rpx;
				color: #797979;
				font-size: 20rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			}

			.time {
				color: #B5B5B5;
				font-size: 20rpx;

			}
		}
	}
</style>
